<template>
    <div>
        <el-divider content-position="center"><span style="font-size: 30px;color: #ff006e">抗疫物资申请</span></el-divider>
        <div style="width: 1250px; display:flex;align-items:center;justify-content:center;">
            <el-row :gutter="15">
                <el-col :span="5">
                    <el-card :body-style="{ padding: '10px' }">
                        <img src="../../assets/goods/kouzao.png"
                             class="image">
                        <div style="padding: 5px;">
                            <span id="kouzhao" class="testStyle">口罩</span>
                            <span class="testStyle">{{AllNum[0]}}</span>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button"  @click="dialogFormVisible = true ,button0()">申请</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card :body-style="{ padding: '10px' }">
                        <img src="../../assets/goods/juijing.jpg"
                             class="image">
                        <div style="padding: 5px;">
                            <span id="juijing" class="testStyle">消毒酒精</span>
                            <span class="testStyle">{{AllNum[1]}}</span>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button" @click="dialogFormVisible = true ,button1()">申请</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card :body-style="{ padding: '10px' }">
                        <img src="../../assets/goods/wenduji.png"
                             class="image">
                        <div style="padding: 5px;">
                            <span id="wenduji" class="testStyle">温度计</span>
                            <span class="testStyle">{{AllNum[2]}}</span>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button" @click="dialogFormVisible = true ,button2()">申请</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card :body-style="{ padding: '10px' }">
                        <img src="../../assets/goods/xishouye.png"
                             class="image">
                        <div style="padding: 5px;">
                            <span id="xishouxiaoduye" class="testStyle">洗手消毒液</span>
                            <span class="testStyle">{{AllNum[3]}}</span>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button" @click="dialogFormVisible = true ,button3()">申请</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <el-divider></el-divider>
        <div style="width: 1250px; display:flex;align-items:center;justify-content:center;">
            <el-row :gutter="15">
                <el-col :span="5">
                    <el-card :body-style="{ padding: '10px' }">
                        <img src="../../assets/goods/zice.png"
                             class="image">
                        <div style="padding: 5px;">
                            <span id="xinguanzice" class="testStyle">新冠自测试剂</span>
                            <span class="testStyle">{{AllNum[4]}}</span>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button" @click="dialogFormVisible = true ,button4()">申请</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card :body-style="{ padding: '10px' }">
                        <img src="../../assets/goods/84.png"
                             class="image">
                        <div style="padding: 5px;">
                            <span id="84xiaodu" class="testStyle">84消毒液</span>
                            <span class="testStyle">{{AllNum[5]}}</span>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button" @click="dialogFormVisible = true ,button5()">申请</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card :body-style="{ padding: '10px' }">
                        <img src="../../assets/goods/fan.png"
                             class="image">
                        <div style="padding: 5px;">
                            <span id="gelican" class="testStyle">隔离餐</span>
                            <span class="testStyle">{{AllNum[6]}}</span>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button" @click="dialogFormVisible = true ,button6()">申请</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="5">
                    <el-card :body-style="{ padding: '10px' }">
                        <img src="../../assets/goods/jijuibao.png"
                             class="image">
                        <div style="padding: 5px;">
                            <span id="jijuibao" class="testStyle">急救包</span>
                            <span class="testStyle">{{AllNum[7]}}</span>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button" @click="dialogFormVisible = true ,button7()">申请</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>


        <el-dialog width="300px" title="请选择数量" :visible.sync="dialogFormVisible" center>
            <div class="InputNumber">
            <el-input-number  v-model="applyGoods.num" :min="1" :max="10" label="描述文字"></el-input-number>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="button">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "goods",
        data() {
            return {
                dialogFormVisible: false,
                applyGoods:{
                    userID:"",
                    num:"1",
                    goodsname:"",
                },
                AllNum:[],
                AllGoods:[],
            };
        },
        created() {
            this.applyGoods.userID = window.sessionStorage.getItem('UUID')
            this.getAllGoods()
        },
        methods: {
            async getAllGoods() {
                const {data: res} = await this.$http.get("getAllGoods");
                this.AllGoods = res.allGoods;
                this.AllNum = res.allNum;
                console.log(this.AllGoods)
                console.log(this.AllNum)
            },
            async button(){
                this.dialogFormVisible = false
                console.log(this.applyGoods.num)
                const{data: res} = await this.$http.post("applyGoods",this.applyGoods);
                if(res==="ok"){
                    await this.$router.push({path: "/404"});
                    await this.$router.push({path: "/community/goods"})
                }
            },
            async button0() {
                if(this.AllGoods[0].num===0){
                    this.dialogFormVisible = false
                    this.$message.error("物资已空");
                }
                this.applyGoods.goodsname=document.getElementById("kouzhao").innerText;
            },
            button1() {
                if(this.AllGoods[1].num===0){
                    this.dialogFormVisible = false
                    this.$message.error("物资已空");
                }
                this.applyGoods.goodsname=document.getElementById("juijing").innerText;
            },
            button2() {
                if(this.AllGoods[2].num===0){
                    this.dialogFormVisible = false
                    this.$message.error("物资已空");
                }
                this.applyGoods.goodsname=document.getElementById("wenduji").innerText
            },
            button3() {
                if(this.AllGoods[3].num===0){
                    this.dialogFormVisible = false
                    this.$message.error("物资已空");
                }
                this.applyGoods.goodsname=document.getElementById("xishouxiaoduye").innerText
            },
            button4() {
                if(this.AllGoods[4].num===0){
                    this.dialogFormVisible = false
                    this.$message.error("物资已空");
                }
                this.applyGoods.goodsname=document.getElementById("xinguanzice").innerText
            },
            button5() {
                if(this.AllGoods[5].num===0){
                    this.dialogFormVisible = false
                    this.$message.error("物资已空");
                }
                this.applyGoods.goodsname=document.getElementById("84xiaodu").innerText
            },
            button6() {
                if(this.AllGoods[6].num===0){
                    this.dialogFormVisible = false
                    this.$message.error("物资已空");
                }
               document.getElementById("gelican").innerText
            },
            button7() {
                if(this.AllGoods[7].num===0){
                    this.dialogFormVisible = false
                    this.$message.error("物资已空");
                }
                document.getElementById("jijuibao").innerText
            },
        },
    }
</script>

<style scoped>
    .InputNumber{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .el-row {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .testStyle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

</style>